<template>
  <div>
    <el-card style="margin:20px;">
      <div>
        <el-input v-model="search" style="float: left;width: 180px;" placeholder="根据用户名搜索" @keyup.enter.native="searcFns" />
        <el-button style="float: left;margin-left:10px;" size="medium" @click="clear">重置</el-button>
        <el-button type="primary" size="medium" @click="searcFns">搜索</el-button>
        <el-button style="float: right; margin-bottom: 15px;" type="success" icon="el-icon-edit" size="medium" :disabled="checkMeuns('basePermissions')" @click="add">新增权限组</el-button>
      </div>
      <div>
        <el-alert
          type="info"
          :closable="false"
          show-icon
        >
          <slot name="title"><span>  共{{ listlength }}条记录</span></slot>
        </el-alert>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :header-cell-style="{ background:'#F2F6Fc', color:'#000000'}"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="320"
        />
        <el-table-column
          prop="title"
          label="用户名"
          width="320"
        />
        <el-table-column
          prop="update_date"
          label="日期"
          sortable
        >
          <template scope="scope">
            {{ scope.row.update_date | transferTime }}
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          width="120"
          show-overflow-tooltip
        >
          <template v-slot="scope">
            <el-button type="primary" icon="el-icon-edit" circle :disabled="checkMeuns('basePermissions')" @click="edit(scope.row.id)" />
            <el-button type="danger" icon="el-icon-delete" circle :disabled="checkMeuns('basePermissions')" @click="del(scope.row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" align="middle" style="height: 60px" class="block">
        <!-- 分页组件 -->
        <el-pagination
          :background="true"
          :current-page="page.page"
          :total="page.total"
          :page-size="page.pagesize"
          :page-sizes="[3,5,8,10]"
          layout="sizes, prev, pager, next, jumper"
          @size-change="changePageSize"
          @current-change="changePage"
        />
      </el-row>
    </el-card>
    <el-dialog :title="title" :visible="showDialog" @close="btnCancel">
      <!-- 表单 -->
      <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="用户名" prop="title">
          <el-input v-model="formData.title" style="width:90%" />
        </el-form-item>
        <el-form-item label="权限分配">
          <el-tree
            ref="permTree"
            v-loading="secondLoading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            :data="perlist"
            :props="defaultProps"
            :default-expand-all="true"
            :show-checkbox="true"
            :default-expanded-keys="[0]"
            :default-checked-keys="formData.permissions"
            node-key="id"
            @check-change="handleCheckChange"
          />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getPermissionsGroup, delPermissionsGroup, detailedPermissionsGroup, changePermissionsGroup, addPermissionsGroup } from '@/api/permissions'
import { getMenusList, changeChildsname } from '@/api/menus'
export default {
  // 过滤器
filters: {
  transferTime(value) {
        const str = value.substring(0, 10)
        const str1 = value.substring(12, 19)
        return str + '-' + str1
      }
},
data() {
  return {
    loading: true,
    secondLoading: true,
    title: '编辑权限组',
    showDialog: false,
    search: '',
    searchFlag: false,
    tableData: [],
    selection: [],
    checkedlist: [],
    page: {
        page: 1, // 当前页码
        pagesize: 3, // 每页显示的条数
        total: 0 // 服务器的总数据
      },
      formData: {
        title: '',
        permissions: [],
        id: '',
        create_date: ''
      },
      rules: {
      title: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
      },
      perlist: [],
      defaultProps: {
        children: `childs`,
        label: 'title'
      }
  }
},
computed: {
  listlength: {
    set() {},
    get() {
       return this.page.total
    }
// return this.tableData.length
  }
},
created() {
this.getPermissionsGroup()
},
methods: {
 // 节点选中状态发生变化时的回调
handleCheckChange(data, checked, indeterminate) {
  // 获取所有选中的节点 start
  const res = this.$refs.permTree.getCheckedNodes()
  const arrDeptId = []
  res.forEach((item) => {
    arrDeptId.push(item.id)
  })
  // arrDeptId 就是选中的数据
  this.formData.permissions = arrDeptId
// console.log(arrDeptId, '就是选中的数据')
},
  // 每页显示条目个数发生改变会触发
  changePageSize(pagesize) {
    this.page.pagesize = pagesize
    this.getPermissionsGroup()
  },
  // 当前页数发生变化时会触发
  changePage(newpage) {
    this.page.page = newpage
    this.getPermissionsGroup()
  },
  // 清除搜索框
  clear() {
    this.search = ''
  },
  // 搜索框搜索
 async searcFns() {
  const res = await getPermissionsGroup({ page: 1,
        pagesize: 3,
        total: 0,
        title: this.search
      })
      this.page.total = res.counts
      this.tableData = res.list
  },
    // 当选择项发生变化时会触发该事件	selection
    handleSelectionChange(selection) {
      this.selection = selection
// console.log(this.selection, '选择项发生了变化111')
    },
  // 获取权限组信息
 async getPermissionsGroup() {
  this.loading = true
  const res = await getPermissionsGroup(this.page)
 // console.log(res, '---权限组信息---')
  this.page.total = res.counts
  this.tableData = res.list
  this.listlength = this.tableData.length
  this.loading = false
 },
  // 删除
async del(id) {
 if (this.selection.length !== 0) {
  await this.$confirm(`您确定要删除当前所选中的${this.selection.length}位用户吗？`)
for (let i = 0; i <= this.selection.length - 1; i++) {
  await delPermissionsGroup(this.selection[i].id)
}
 } else {
  await this.$confirm('您确定要删除该用户吗？')
await delPermissionsGroup(id)
 }
 this.$message.success('删除成功')
 this.getPermissionsGroup()
 },
 // 编辑
async edit(id) {
  this.title = '编辑权限组'
  this.showDialog = true
  this.secondLoading = true
const res = await detailedPermissionsGroup(id)
this.formData = res
// console.log(this.formData, '---formdata---')
const result = await getMenusList({ page: 1,
        size: 20,
        total: 0 })
// console.log(res, '---编辑---')
this.perlist = changeChildsname(result)
this.secondLoading = false
 },
 // 确认
async btnOK() {
  if (this.formData.id) {
  await changePermissionsGroup(this.formData)
  this.$message.success('编辑成功')
  } else {
   await addPermissionsGroup(this.formData)
   this.$message.success('添加成功')
  }
  this.showDialog = false
 this.getPermissionsGroup()
 },
 // 新增
 async add() {
    this.formData = {
         title: '',
        permissions: [],
        id: '',
        create_date: ''
  }
  this.title = '新增权限组'
  this.showDialog = true
  this.secondLoading = true
  const res = await getMenusList({ page: 1,
        size: 20,
        total: 0 })
        this.perlist = changeChildsname(res)
        this.secondLoading = false
  },
 // 取消
 btnCancel() {
  this.formData = {
         title: '',
        permissions: [],
        id: '',
        create_date: ''
  }
  this.$refs.perForm.resetFields() // 重置校验字段清空表单绑定的所有数据
  this.showDialog = false
 }
}
}
</script>

<style>

</style>